<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="资料详情" />
		<!-- 内容被删除 -->
		<not-detail v-if="pageDelete" title="未查询到任何内容，可能已被下架" />
		<view class="container" v-if="details.materialsId || details.specialSubjectId">
			<view class="topic-tips fboxRow Ycenter font24" v-if="details.specialSubjectId" @tap="goTopic">
				<view class="flex1 color-36363A">{{details.specialSubjectName}}</view>
				<view class="color-00C15D">查看专题</view>
			</view>
			<datum-video v-if="format == '.mp3' || format == '.mp4'" :innerData="details" :type="format"
				@buy="buyTap" />
			<datum-info v-if="details.materialsId" :innerData="details" layoutType="1" />
			<datum-pdf id="datum-pdf" v-if="format == '.pdf'" :innerData="details" @buy="buyTap" />
			<view class="space-block"></view>
			<view class="datum-intr w750">
				<view class="title font28 fwb">资料描述</view>
				<view v-if="!details.remark" class="font28 color-323233">暂无描述</view>
				<block v-else>
					<rich-text :nodes="details.remark"
						style="line-height: 52rpx; font-size:28rpx;color:#323233"></rich-text>
				</block>
			</view>
		</view>
		<!-- <u-modal :show="modalObj.show" title="提示" 
		:content="modalObj.content" 
		:confirmText="modalObj.confirmText"
		:cancelText="modalObj.cancelText"
		confirmColor="#00C15D"
		cancelColor="#969699"
		:showCancelButton="true"
		@close="modalObj.show=false"
		@confirm="modalClick('confirm')"
		@cancel="modalClick('cancel')"
		:closeOnClickOverlay="true"></u-modal> -->
		<BottomAction ref="BottomAction" :back="modalBack" :innerData="details" type="datum" />
	</view>
</template>

<script>
	import { throttle } from '@/static/js/common.js';
	import { datumDetails, buyDatum } from '@/api/bks.datum.js';
	import { getBksInfo } from '@/static/js/bks.common.js'
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import notDetail from '@/pagesBKS/components/not-detail.vue';
	import datumInfo from './components/datum-info.vue';
	import datumPdf from './components/datum-pdf.vue';
	import datumVideo from './components/datum-video.vue';
	import BottomAction from './components/bottom-action.vue'
	export default {
		components: {
			headerCustom,
			notDetail,
			datumInfo,
			datumPdf,
			datumVideo,
			BottomAction
		},
		props: {},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				details: {},
				pageDelete: false,
				format: '',
				modalObj:{
					show: false,
					identify: '',
					content: '',
					confirmText: '',
					cancelText: '',
				},
				modalBack: false // 专题和资料相互跳转对其进行返回处理
			}
		},
		onLoad(option) {
			if (option.id) {
				this.materialsId = option.id
				this.getDetail()
			}
			if(option && option.back){
				this.modalBack = true
			}
		},
		methods: {
			// 获取资料详情
			getDetail() {
				datumDetails({
					materialsId: this.materialsId
				}).then(res => {
					const remark = res.data.remark.replace(/\<img/gi,
						'<img style="max-width:100%;margin-top:10px;height:auto;display:block;"');
					res.data.remark = remark
					this.details = res.data
					// if(!this.details.previewUrl){
					// 	this.details.previewUrl = 'https://ebc-prod.cdn.benwunet.com/Preview.png'
					// }
					this.format = res.data.format
				}).catch(err => {
					this.pageDelete = true
				})
			},
			// 跳转话题
			goTopic() {
				if(this.modalBack){
					this.$pageTo('/bks/datum/topic/index', { id: this.details.specialSubjectId })
				}else{
					uni.navigateBack({
						delta: 1
					})
				}
			},
			buyTap: throttle(function() {
				this.$refs.BottomAction.onPay()
			}, 1000),
		}
	}
</script>

<style lang="scss" scoped>
	.topic-tips {
		padding: 0 30rpx;
		height: 72rpx;
		background: #F5FAF7;
	}

	.datum-intr {
		padding: 30rpx;
	}

	.title {
		margin-bottom: 20rpx;
	}
</style>